<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>

<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>

<!--添加 layui 自己的 css js  支持加载-->
<link href="/css/houtai/manage_base.css"	rel="stylesheet" />
<script	src="/js/houtai/manage_base.js"></script>
<!--添加 layui 自己的 css js  支持加载-->

</head>

<script>
//定义在外面。可以代码中  使用 table
var table;
layui.use([ 'laydate', 'laypage', 'layer','form', 'table', 'carousel',
			'upload', 'element' ], function() {
	table = layui.table;
});

var global_ids;
var global_ids_len;

var w ;//窗口的宽
var h ;//窗口的高

//添加
function add(){
	w = 400;
	h = 500;
	checkWindow();
	//iframe层
	layer.open({
	  type: 2,
	  title: '添加',
	  shadeClose: false,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: '/houtai/menu/add?pId=[[${pId}]]' //iframe的url
	});
}

//打开编辑窗口
function edit(id){
	w = 400;
	h = 500;
	checkWindow();
	layer.open({
	  type: 2,
	  title: '修改',
	  shadeClose: false,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: '/houtai/menu/edit?id='+id //iframe的url
	});
}


//子窗口调用 的  关闭窗口方法 
function closeDlg(msg){
	 layer.closeAll();
	 layer.msg(msg);
	 reload_data();
}

//相当前刷新  重新加载
function reload_data(){
  table.reload('table', {
		where: {
	     },page: {curr: 1 //重新从第 1 页开始
				}
    });
}

function del(ids){
	var index = layer.load(1, {
		  shade: [0.1,'#fff'] //0.1透明度的白色背景
	});
	$.post('/admin/menu/delete',{ids:ids},function(result){
		if(result.success){
			layer.closeAll();
			layer.msg('删除成功');
			reload_data();
		}else{
			layer.closeAll();
			layer.alert('删除失败:'+result.msg);
		}
	},'json');
}

function seeImg(url){
	w = 2000;
	h = 2000;
	checkWindow();
	//iframe层
	if(!url){
		url = "   ";
	}
	layer.open({
	  type: 2,
	  title: '图片',
	  shadeClose: true,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: url //iframe的url
	});
}

function manage(id){
	w = 800;
	h = 900;
	checkWindow();
	layer.open({
	  type: 2,
	  title: '管理子菜单',
	  shadeClose: false,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: '/houtai/menu/manage?pId='+id //iframe的url
	});
}

function table_edit_update(id,field,value){
	$.post('/admin/menu/update?'+field+'='+value,{id:id},function(result){
		if(result.success){
			layer.msg('修改成功');
		}else{
			layer.closeAll();
			layer.msg(result.msg);
		}
	},'json');
}

</script>
<body style="padding-top: 3px;">

<div class="layui-table-toolbar" style="margin-bottom: 3px; ">
	<div class="layui-btn-group">
		<button onclick="add()"  class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加</button>
		<button onclick="delSelected()" class="layui-btn layui-btn-sm layui-btn-danger" ><i class="layui-icon">&#xe640;</i>删除</button>
	    <button class="layui-btn layui-btn-sm" onclick="reload_data()"><i class="layui-icon">&#xe669;</i>刷新</button>
 	 </div>
</div>

<table class="layui-hide"   id="table" lay-filter="table"></table>
</body>

<script type="text/html" id="table_bar">
<div class="layui-btn-group">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-xs" lay-event="manage">管理子菜单</a>
</div>
</script>

<script type="text/html" id="format_state">
{{#  if(d.state == 0){ }}
根节点
{{#  } else if(d.state == 1){  }}
叶子节点
{{#  }   }}
</script>

<script type="text/html" id="format_type">
{{#  if(d.type == 0){ }}
选项卡内打开
{{#  } else if(d.type == 1){  }}
新窗口打开
{{#  }else if(d.type == 2){   }}
弹出窗口打开
{{#  }    }}
</script>

<script>
/*<![CDATA[*/
		layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
				'upload', 'element' ], function() {
			var laydate = layui.laydate //日期
			, laypage = layui.laypage //分页
			,layer = layui.layer //弹层
			,form = layui.form 
			, table = layui.table //表格
			, carousel = layui.carousel //轮播
			, upload = layui.upload //上传
			, element = layui.element; //元素操作
			  table.render({
			    elem: '#table'
			    ,url: '/admin/menu/list?pId=[[${pId}]]'
			    ,height: 'full-60'
			    ,totalRow: true
				,cols: [ [
			       {checkbox: true, fixed: true}
			       ,{field:'id', title: 'ID', width:60 ,style:'font-size: 12px;', edit: 'text'}
			       ,{field:'orderNo', title: '排序号', width:60 ,style:'font-size: 12px;', edit: 'text'}
			      ,{field:'name', title: '菜单名称', width:90,style:'font-size: 12px;' }
			      ,{field:'url', title: '菜单地址', width:100 ,style:'font-size: 12px;'}
			      ,{field:'state', title: '节点类型', width:100 ,style:'font-size: 12px;',templet: '#format_state'}
			      ,{field:'icon', title: '图标', width:100 ,style:'font-size: 12px;'}
			      ,{field:'permissions', title: '权限名称', width:100 ,style:'font-size: 12px;'}
			      ,{field:'type', title: '打开方式', width:100 ,style:'font-size: 12px;',templet: '#format_type'}
			      ,{field:'divId', title: 'layuiTabId', width:100 ,style:'font-size: 12px;'}
			      
			      ,{fixed:'right', width:120,title: '操作',  toolbar: '#table_bar'}
			       ] ]
			    ,id: 'table'
			    ,page: true
			    ,limits:[10,20,30,50],
			   limit:10
			  });
				
			//监听工具条 table_bar
				table.on('tool(table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
					, layEvent = obj.event; //获得 lay-event 对应的值
					if (layEvent === 'edit') {
						edit(data.id);
					}else if(layEvent === 'manage'){
						manage(data.id);
					}
				});
				
				//监听单元格编辑
				  table.on('edit(table)', function(obj){
				    var value = obj.value //得到修改后的值
				    ,data = obj.data //得到所在行所有键值
				    ,field = obj.field; //得到字段
				    //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
				    table_edit_update(data.id,field,value);
				  });
				
				
		});
		/*]]>*/
</script>

</html>